import React, { useRef } from 'react';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { routes } from '../../../../config/routes';
import { Badge } from 'antd';

// 角色列表
function MenuList() {
  const tableRef = useRef<ActionType>();

  const columns: ProColumns<API.RuleListItem>[] = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      search: false,
    },
    {
      title: '菜单路径',
      dataIndex: 'path',
      search: false,
    },
    {
      title: 'Layout',
      dataIndex: 'layout',
      search: false,
      render: (_, { layout }) => {
        return (
          <>
            {layout === false ? (
              <Badge status="error" text="不显示" />
            ) : (
              <Badge status="success" text="显示" />
            )}
          </>
        );
      },
    },
    {
      title: '是否隐藏',
      dataIndex: 'hideInMenu',
      search: false,
      render: (_, { hideInMenu }) => {
        return (
          <>
            {hideInMenu && <Badge status="error" text="隐藏" />}
            {!hideInMenu && <Badge status="success" text="正常" />}
          </>
        );
      },
    },
  ];

  // 递归排除数据中没有name的数据
  const filterData = (data) => {
    const result = [];
    data.forEach((item) => {
      if (item.routes) {
        item.routes = filterData(item.routes);
      }
      if (item.name) {
        result.push(item);
      }
    });
    return result;
  };

  const getTable = async () => {
    return {
      success: true,
      data: filterData(routes),
    };
  };

  return (
    <>
      <PageContainer title={false}>
        <ProTable
          columns={columns}
          search={false}
          options={{ fullScreen: false, reload: false, density: true, setting: true }}
          actionRef={tableRef}
          rowKey={'path'}
          request={getTable}
          pagination={false}
          childrenColumnName={'routes'}
        />
      </PageContainer>
    </>
  );
}

export default MenuList;
